html,body {
	margin: 0;
	height: 100%;
	min-width: 870px;
}

body {
	margin: 0;
	overflow-y: hidden;
	background-attachment: fixed;
	background-position: center top;
}

h1 {
	display: block;
	font-size: 2em;
	margin-block-start: 0.67em;
	margin-block-end: 0.67em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
}

$primary: #5a98de;
$success: #56D417;
$warning: #EB9617;
$danger: #F56C6C;
$info: #909399;
$white: #ffffff;
$background-white: #ffffff;
$focus: #409EFF;
$color-danger: #F56C6C;
$shadow: 2px 2px 6px 0px rgb(209, 213, 221);
$shadow-hover: 2px 2px 6px 0px rgb(182, 186, 194);
$color-titlecolor: #999999;
$color-border-base: #DCDFE6;
$color-border-base-hover: #C0C4CC;
$color-text-placeholder: #C0C4CC;
$color-text-disabled: #c0c4cc;
$color-text-disabled-hover: #aaaeb4;
$color-text-primary: $primary;
$color-primary: #0fc7ca;
$color-dark: #3d3d3d;

$background-highlight: #ecf5ff;
$text-hover: $focus;

/** 主题 **/
.color {
	&-success {
		background-color: $success;
	}

	&-primary {
		background-color: $primary;
	}

	&-warning {
		background-color: $warning;
	}

	&-danger {
		background-color: $danger;
	}

	&-info {
		background-color: $info;
	}

	&-white {
		background-color: $white;
	}

	&-desc {
		background-color: #e9ebef;
	}
}

.text {
	&-success {
		color: $success !important;

		&-hover:hover {
			color: $success !important;
		}
	}

	&-primary {
		color: $primary !important;

		&-hover:hover {
			color: $primary !important;
		}
	}

	&-warning {
		color: $warning !important;

		&-hover:hover {
			color: $warning !important;
		}
	}

	&-danger {
		color: $danger !important;

		&-hover:hover {
			color: $danger !important;
		}
	}

	&-info {
		color: $info !important;

		&-hover:hover {
			color: $danger !important;
		}
	}

	&-placeholder {
		color: $color-text-placeholder;
	}

	/**
	 * creating: '创建中', // 色
	 * editing: '编辑中',  // 普通色
	 * approving: '审批中', // warning
	 * rejected: '审批驳回',  // danger
	 * cancelled: '撤消审批',  //
	 * timeout: '审批超时', 
	 * waiting: '待下发', 
	 * running: '填报中', 
	 * end: '已完成'
	 **/
	&-creating,
	&-approving {
		color: $warning;
	}

	&-disable,
	&-rejected,
	&-timeout,
	&-cancelled {
		color: $danger;
	}

	&-processed,
	&-pass,
	&-enable,
	&-running {
		color: $success;
	}

	&-waiting {
		color: $primary;
	}

	&-end {
		color: $info;
	}

	&-bold {
		font-weight: 500;
	}

}

$border-color-base: #DCDFE6;

/** 边框 **/
.border {
	&-1 {
		border: 1px solid $border-color-base;
	}

	&-left {
		border-left: 1px solid $border-color-base;
	}

	&-right {
		border-right: 1px solid $border-color-base;
	}

	&-top {
		border-top: 1px solid $border-color-base;
	}

	&-bottom {
		border-bottom: 1px solid $border-color-base;
	}
}

/** 定位 **/

.fixed {
	position: fixed;
}

.absolute {
	position: absolute;
}

.relative {
	position: relative;
}

.sticky {
	position: sticky;
}

// 根据行数显示显示，多余部分...代替
@for $i from 1 through 10 {
	.line-overflow-#{$i} {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: $i;
		-webkit-box-orient: vertical;
	}
}

//分页
.page-box {
	display: flex;
	justify-content: center;
	height: 50px;
	align-items: center;
	width: 100%;
}

.h-100 {
	height: 100% !important;
}

.w-100 {
	width: 100% !important;
}

.flex {
	display: flex;

	&.justify-center {
		justify-content: center;
	}

	&.align-center {
		align-items: center;
	}

	&.between {
		justify-content: space-between;
	}

	&.end {
		justify-content: flex-end;
	}

	.flex-1 {
		flex: 1;
	}

	&-nowrap {
		@extend .flex;
		flex-wrap: nowrap;
	}

	&-row {
		@extend .flex;
		flex-direction: row;
	}

	&-column {
		@extend .flex;
		flex-direction: column;
	}

	&-center {
		@extend .flex;
		align-items: center;
	}

	&-justify {
		@extend .flex-center;
		justify-content: center;
	}

	&-between {
		@extend .flex-center;
		justify-content: space-between;
	}

	&-around {
		@extend .flex-center;
		justify-content: space-around;
	}

	&-right {
		@extend .flex-center;
		justify-content: flex-end;
	}

	&-column-between-start {
		@extend .flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: start
	}
}

.card {
	position: relative;
	border: 1px solid $color-border-base;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: $shadow;

	&.action:hover {
		box-shadow: $shadow-hover;

		.cs-card-tools {
			display: block;
		}
	}
}

@for $i from 0 through 100 {
	.margin-auto {
		margin: auto
	}

	.margin-#{$i} {
		margin: $i + px !important;
	}

	.margin-t-#{$i} {
		margin-top: $i + px !important;
	}

	.margin-tb-#{$i} {
		margin-top: $i + px !important;
		margin-bottom: $i + px !important;
	}

	.margin-b-#{$i} {
		margin-bottom: $i + px !important;
	}

	.margin-l-#{$i} {
		margin-left: $i + px !important;
	}

	.margin-lr-#{$i} {
		margin-left: $i + px !important;
		margin-right: $i + px !important;
	}

	.margin-r-#{$i} {
		margin-right: $i + px !important;
	}

	.padding-#{$i} {
		padding: $i + px !important;
	}

	.padding-t-#{$i} {
		padding-top: $i + px !important;
	}

	.padding-tb-#{$i} {
		padding-top: $i + px !important;
		padding-bottom: $i + px !important;
	}

	.padding-b-#{$i} {
		padding-bottom: $i + px !important;
	}

	.padding-l-#{$i} {
		padding-left: $i + px !important;
	}

	.padding-lr-#{$i} {
		padding-left: $i + px !important;
		padding-right: $i + px !important;
	}

	.padding-r-#{$i} {
		padding-right: $i + px !important;
	}

	.width-#{$i} {
		width: $i + px !important;
	}

	.height-#{$i} {
		height: $i + px !important;
	}

	.line-#{$i} {
		line-height: $i + px !important;
	}

	.radius-#{$i} {
		border-radius: $i + px;
	}

	.radius-l-#{$i} {
		border-top-left-radius: $i + px;
		border-bottom-left-radius: $i + px;
	}

	.radius-r-#{$i} {
		border-top-right-radius: $i + px;
		border-bottom-right-radius: $i + px;
	}

	.corner-#{$i} {
		overflow: hidden;
		border-radius: $i + px !important;
	}

	.font-#{$i} {
		font-size: $i+px !important;
	}

	.gap-#{$i} {
		gap: $i + px;
	}

	.left-#{$i} {
		left: $i + px;
	}

	.bottom-#{$i} {
		bottom: $i + px;
	}

	.right-#{$i} {
		right: $i + px;
	}

	.top-#{$i} {
		top: $i + px;
	}
}

.el-header {
	&.underline {
		border-bottom: 1px solid $color-border-base;
	}

	&.height-50 {
		height: 50px !important;

	}

	.title {
		font-size: 18px;
	}
}

.el-footer {
	&.topline {
		border-top: 1px solid $color-border-base;
	}

	&.height-50 {
		height: 50px !important;
	}

	&.height-40 {
		height: 40px !important;
	}
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*解决固定列遮盖底部滚定条导致滚动条无法滚动的问题*/
.el-table__body-wrapper {
	z-index: 2;
}

/*解决固定列遮盖底部滚定条导致滚动条无法滚动的问题*/
.el-table .el-table__fixed,
.el-table .el-table__fixed-right {
	height: 100% !important;
}

.el-table__fixed-right-patch {
	background-color: #f5f7fa !important;
}

.el-table__body-wrapper::-webkit-scrollbar {
	width: 8px;
	/*滚动条宽度*/
	height: 8px;
	/*滚动条高度*/
}

.el-table__body-wrapper::-webkit-scrollbar-track {
	border-radius: 10px;
	/*滚动条的背景区域的圆角*/
	-webkit-box-shadow: inset 0 0 6px rgba(238, 238, 238, 0.3);
	box-shadow: inset 0 0 6px rgba(238, 238, 238, 0.3);
	background-color: #eeeeee;
	/*滚动条的背景颜色*/
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
	border-radius: 10px;
	/*滚动条的圆角*/
	-webkit-box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3);
	box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3);
	background-color: rgb(145, 143, 143);
	/*滚动条的背景颜色*/
}


%text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.text-truncate {
	@extend %text-truncate
}


.scroll {
	&::-webkit-scrollbar {
		width: 8px;
		/*滚动条宽度*/
		height: 8px;
		/*滚动条高度*/
	}

	&::-webkit-scrollbar-track {
		border-radius: 10px;
		/*滚动条的背景区域的圆角*/
		-webkit-box-shadow: inset 0 0 6px rgba(238, 238, 238, 0.3);
		box-shadow: inset 0 0 6px rgba(238, 238, 238, 0.3);
		background-color: #eeeeee;
		/*滚动条的背景颜色*/
	}

	&::-webkit-scrollbar-thumb {
		border-radius: 10px;
		/*滚动条的圆角*/
		-webkit-box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3);
		box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3);
		background-color: rgb(145, 143, 143);
		/*滚动条的背景颜色*/
	}
}

.el-dialog {
	display: flex;
	flex-direction: column;

	.el-dialog__header,
	.el-dialog__header {
		border-bottom: 1px solid $border-color-base;
	}

	.el-dialog__body {
		position: relative;
		box-sizing: border-box;
		flex: 1;
		padding: 20px;
		background: $background-highlight;
	}

	&.is-fullscreen {
		height: 100%;
		.el-dialog__body {
			height: 100%;
		}
	}

	.el-dialog__footer {
		position: relative;
		box-sizing: border-box;
		height: 70px;
		border-top: 1px solid $border-color-base;
	}
}

.el-tooltip__popper.is-dark {
	background: #fff !important;
	color: #303133 !important;
	max-width: 18%;
	border: 1px solid #303133;
}

/* 更改箭头颜色 */
.el-tooltip__popper[x-placement^='top'] .popper__arrow::after {
	border-top-color: #fff !important;
}

.el-tooltip__popper[x-placement^='bottom'] .popper__arrow::after {
	border-bottom-color: #fff !important;
}

.el-popover.el-popper { 
	min-width: 100px;
}